<template>
 <div class="container" >
    <input v-model="userName" placeholder="请输入用户名">
    <button @click="addName">增加</button>
    <select v-model="sex">
        <option value="0">男</option>
        <option value="1">女</option>
    </select>
    <span>{{ this.userName }}</span>
    <span>{{ this.sex }}</span>
    <input v-model="sex" type="number" min="0" max="1">
 </div>
</template>
<script>
 export default {
 name: '',
 data: function(){
 return {
    userName:"",
    sex:0
 }
 },
 methods:{
    addName:function(){
        // 指定范围内，指定个数，无重复的随机整数
    let arr = parseInt(Math.random() * (10) + 0);

    this.userName = this.userName + arr;
    }
 }
 }
</script>
<style>
html,
 body, 
 #app{
 height: 100%;
 }
</style>
<style scoped>
 .container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 background-color: aliceblue;
 }
 .tr{
 width: 200px;
 flex-basis: 50px;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 background-color: beige;
 align-items: center;
 }
 .second{
 background-color: aqua;
 }
</style>